import mapboxgl from 'mapbox-gl';
class MapboxGl {
    map
    constructor(options) {
        let opt = {
            accessToken: 'pk.eyJ1IjoiYmF5YWVyIiwiYSI6ImNsZTZ0dzQ1NTBxY2Izcm9naGcxY2IwdWMifQ.LmTMoZcPxO8o7jIPRS5_sw',
            container: 'map',
            zoom: 3,
            style: 'mapbox://styles/mapbox/light-v11',
            projection: 'globe',
            center: [7.5, 58],
            clickTolerance: 3 // 计算点击的有效范围
        }
        Object.assign(opt, options)
        this.map = new mapboxgl.Map({...opt})
    }

    getAllLayer(){
        this.map.on('load',() => {
            return this.map.getStyle().layers
        })
    }
    // 获取以id为命名的图层
    getLayer(id) {
        this.map.getLayer(id)
    }

    // 改变缩放等级
    setZoom(num) {
        this.map.setZoom(num)
    }
    // 改变中心点
    setCenter(arr) {
        this.map.setCenter(arr)
    }

    switchStyle() {

    }

    /**
     *  map的事件
     * @param eventType 事件类型
     * @param layerId   图层id
     * @param callback  回调函数
     */
    addEventOnMap(eventType, layerId, callback) {
        this.map.on(eventType, layerId, (e) => {
            const lngLat = e.lngLat
            callback(e.features[0].properties, lngLat, layerId)
        })
    }
    /**
     * 定位 -- 点
     * @param point：Array<number> 定位到的点位 经纬度
     * @param marker:Object  Marker的配置项   是否显示marker 显示的时候 key: Marker图层的key值， layerManager：图层存储的对象 必传
     * @returns {*}
     */
    flyTo(point, option,  markOption) {
        let opt = {
            zoom: 7,
            essential: true,
            speed: 1,
            curve: 1,
            easing(t) {
                return t;
            }
        }
        Object.assign(opt, option)
        this.map.flyTo({
            center: point,
            ...opt
        })
        debugger
        if (markOption) {
            debugger
            const { key, layerManager } = markOption
            layerManager.addMarkerLayer(point, key, option)
        }
    }

    /**
     * 定位 区域 线
     * @param data  LngLatBounds 或者 geoJson数据
     */
    fitBounds(data) {
        if (Array.isArray(data)){
            this.map.fitBounds(data, {
                padding: 10
            })
        } else {
            const type  = data.features[0].geometry.type
            const typeFunc = {
                'line': this.lineStringFitBound,
                'LineString': this.lineStringFitBound
            }
            typeFunc[type](data, this)
        }
    }

    // 定位时 geojson类型为 line 或者 LineString
    lineStringFitBound(data, _this) {
        const coordinates = data.features[0].geometry.coordinates;
// Create a 'LngLatBounds' with both corners at the first coordinate.
        const bounds = new mapboxgl.LngLatBounds(
            coordinates[0],
            coordinates[0]
        );
// Extend the 'LngLatBounds' to include every coordinate in the bounds result.
        for (const coord of coordinates) {
            bounds.extend(coord);
        }
        _this.map.fitBounds(bounds, {
            padding: 30
        });
    }
}

export default MapboxGl
